<template name='channelkeys'>
    <div class="ui stackable grid column">
        <div class="sixteen wide column" style="padding-left:5px;">
            <p>
                {{ translate 'CHANNEL_KEYS_PARAGRAPH_INTRO' }}
                {{>badgehelp 'keys'}}
            </p>
            <div class="ui custom popup popupQRCode bottom left transition hidden">
                <img src="{{qrCode}}">
            </div>
            <div class="ui inverted segment">
                <h4>{{ translate 'MASTER_KEY' }}</h4>
                {{#if equals mainKey loggedInPub}}
                    <h3>
                        <i class="icon exclamation triangle red"></i>
                        {{ translate 'CHANNEL_KEYS_WARNING_SECURITY'}}
                    </h3>
                {{/if}}
                <div class="ui left icon input">
                    <input type="text" value="{{mainKey}}" readonly>
                    <i class="lock icon"></i>
                </div>
                {{#if equals mainKey loggedInPub}}
                    <div class="ui left icon action input">
                        <input id="privateKey" type="password" value="{{loggedInPriv}}" readonly>
                        <i class="key icon"></i>
                        <button class="ui tiny icon button revealButton">
                            <i class="eye icon"></i>
                        </button>
                        <button class="ui tiny icon button qrButtonMaster">
                            <i class="barcode icon"></i>
                        </button>
                    </div>
                {{/if}}
            </div>
            {{#if keys}}
                {{#each keys}}
                    <div class="ui segment">
                        <h4>
                            Custom Key: {{id}}
                        </h4>
                        <div class="ui left icon input">
                            <input type="text" value="{{pub}}" readonly>
                            <i class="lock icon"></i>
                        </div>
                        {{#if equals pub loggedInPub}}
                            <i class="icon check green"></i>
                            <div class="ui left icon action input">
                                <input id="privateKey" type="password" value="{{loggedInPriv}}" readonly>
                                <i class="key icon"></i>
                                <button class="ui tiny icon button revealButton">
                                    <i class="eye icon"></i>
                                </button>
                                <button class="ui tiny icon button qrButton">
                                    <i class="barcode icon"></i>
                                </button>
                            </div>
                        {{/if}}
                        {{#if equals mainKey loggedInPub}}
                        <button class="ui red tiny icon button deleteKeyButton" data-key="{{id}}">
                            <i class="x icon"></i> Delete key
                        </button>
                        {{/if}}
                    </div>
                {{/each}}
            {{else}}
            {{/if}}
            <div class="ui styled fluid accordion">
                <div class="title" style="text-align: left;">
                    <i class="dropdown icon"></i>
                    {{ translate 'CUSTOM_KEY_NEW' }}
                </div>
                <div class="content">
                    <form class="ui form newcustomkey">
                        <div class="field">
                            <label>Key identifier</label>
                            <input type="text" id="newkey-id">
                        </div>
                        {{>keypair}}
                        <h5>Permissions:</h5>
                        {{#each transactionTypes}}
                            <div class="field">
                                <div class="ui toggle checkbox">
                                    <input type="checkbox" tabindex="0" class="hidden transactionType" data-txid="{{id}}">
                                    <label>{{name}}</label>
                                </div>
                            </div>
                        {{/each}}
                        <button id="newKeyButton" class="ui red button" type="submit">Create</button>
                    </form>
                </div>
                <div class="title" style="text-align: left;">
                    <i class="dropdown icon"></i>
                    {{ translate 'MASTER_KEY_CHANGE' }}
                </div>
                <div class="content">
                    <form class="ui form">
                        {{>keypair}}
                        <div class="field">
                            <div class="ui checkbox">
                                <label>{{ translate 'MASTER_KEY_CHANGE_CONFIRM_ONE' }}</label>
                                <input type="checkbox" id="masterkeyconfirm1">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui checkbox">
                                <label>{{ translate 'MASTER_KEY_CHANGE_CONFIRM_TWO' }}</label>
                                <input type="checkbox" id="masterkeyconfirm2">
                            </div>
                        </div><br>
                        <button id="changeMasterKeyBtn" class="ui red button disabled" type="submit">{{ translate 'UPLOAD_SUBMIT' }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>